import { Button } from "antd";
import { Select } from "antd";
import { Input, Form, FormInstance } from "antd";
import FormItem from "antd/es/form/FormItem";
import { Option } from "antd/es/mentions";
import React from "react";
export interface SecondViewProps {
  sampleP?: string;
}
export interface SecondViewState {
  sampleS?: number;
}
export interface Person {
  username: string;
  sex: "male" | "female";
  age?: number;
}
export default class SecondView extends React.Component<
  SecondViewProps,
  SecondViewState
> {
  static defaultProps = {
    // sampleP: "primary",
  };
  form = React.createRef<FormInstance<Person>>();
  constructor(props: SecondViewProps) {
    super(props);
    this.state = {
      //   sampleS: 1,
    };
  }
  componentDidMount(): void {
    console.log("componentDidMount");
    console.log(this.form);
  }

  //   method like:
  //   sampleM = () => {
  //   };
  submit = () => {
    const t= this.form.current?.getFieldsValue();
    console.log(t);
  };
  render(): React.ReactNode {
    return (
      <>
        <button>SecondView</button>
        <Form ref={this.form} style={{width:"200px"}}>
          <FormItem name="username" label="姓名">
            <Input></Input>
          </FormItem>
          <FormItem name="sex" label="性别">
            <Select>
              <Option value="male">男</Option>
              <Option value="famale">女</Option>
            </Select>
          </FormItem>
          <Button onClick={this.submit}>提交</Button>
        </Form>
      </>
    );
  }
}
